<template>
  <div class="page-uploadAndExport">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="Date" width="180" />
      <el-table-column prop="name" label="Name" width="180" />
      <el-table-column prop="address" label="Address" />
    </el-table>
    <el-button @click="handleExport"> 导出Excel </el-button>
  </div>
  <div class="xls">
    <!-- <span>导入</span>
        <input type="file" accept=".xls,.xlsx" class="upload-file" ref="uploadImgBtn" @change="Excel($event)" /> -->
    <el-upload action=""
               class="upload__box"
               accept=".xls,.XLS,.xlsx,.XLSX"
               :on-change="Excel"
               :auto-upload="false"
               :show-file-list="false">
      <el-button>导入</el-button>
    </el-upload>
  </div>
  <el-table :data="uploadTableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180" />
    <el-table-column prop="name" label="姓名" width="180" />
    <el-table-column prop="address" label="地址" />
    <el-table-column prop="gender" label="性别" />
  </el-table>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import * as XLSX from 'xlsx'
import { exportExcel } from './config'
// import pdf from 'vue-pdf'
const tableData = [
    {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
        gender: '男'
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles'
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles'
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles'
    }
]
const uploadTableData: any = ref([])
const titleArr = ['日期', '姓名', '地址', '性别']
const head = {
    date: '日期',
    name: '姓名',
    address: '地址',
    gender: '性别'
}
// 导出
const handleExport = () => {
    // 匹配对应的表头
    const tableList = tableData.map(item => {
        const obj = {}
        Object.keys(head).forEach(item1 => {
            // 打包报错注释
            // obj[head[item1]] = item[item1]
        })
        return obj
    })

    console.log(tableList)
    // XLSX.utils.json_to_sheet 是 XLSX 库中的一个方法，用于将 JSON 对象数组转换为工作表对象；
    const data = XLSX.utils.json_to_sheet(tableList) //此处tableData.value为表格的数据
    const wb = XLSX.utils.book_new()
    XLSX.utils.book_append_sheet(wb, data, 'test-data') //test-data为自定义的sheet表名
    XLSX.writeFile(wb, '正确.xlsx')
    // exportExcel(tableData, '中文标题', titleArr, 'sheetName')
}
// 导入
const Excel = (uploadFile: any, uploadFiles: any) => {
    console.log(uploadFiles)
    // const files = e.target.files
    const files = [uploadFile.raw]
    console.log(files)
    if (files.length <= 0) {
        return false
    } else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
        return false
    }
    // 读取表格
    const fileReader = new FileReader()
    // FileReader对象是HTML5中的一个API，它可以用来读取本地文件的内容，并将文件内容以不同的方式呈现出来。readAsBinaryString方法是FileReader对象中的一个方法，它可以将文件内容读取为二进制字符串。
    // 该代码中，files[0]是一个File对象，表示用户选择的一个本地文件。调用FileReader对象的readAsBinaryString方法，将该文件读取为二进制字符串。
    // 读取完成后，可以通过FileReader对象的onload事件来获取读取到的文件内容。
    fileReader.readAsBinaryString(files[0])
    fileReader.onload = ev => {
    // read方法的第一个参数是Excel文件内容，必须是一个二进制字符串；第二个参数是一个可选的配置对象，用来指定读取Excel文件的方式，如类型（type）、日期格式（dateNF）、工作簿选项（workbookOptions）等。
    // 在该代码中，type选项被设置为"binary"，表示Excel文件是以二进制字符串的形式读取的。读取完成后，read方法会返回一个JavaScript对象，表示Excel文件的信息。可以通过该对象来获取Excel文件的各种信息，并进行后续的处理和操作。
        const workbook = XLSX.read(ev.target?.result, {
            type: 'binary'
        })
        const wsname = workbook.SheetNames[0]
        // XLSX.utils.sheet_to_json 是 XLSX 库中的一个方法，用于将 Excel 表格中的数据转换成 JSON 格式;
        // workbook.Sheets[wsname] 是 XLSX 库中的一个对象，表示 Excel 文件中的一个工作表，wsname 是该工作表的名称;
        // const xl 是一个常量，用于存储转换后的 JSON 数据。
        // 因此，这段代码的作用是将 Excel 表格中指定工作表的数据转换成 JSON 格式，并存储在 xl 变量中，以便后续使用。
        const xl = XLSX.utils.sheet_to_json(workbook.Sheets[wsname])
        // xl.shift()
        console.log(xl)
        // dealExcel(xl) //...对数据进行自己需要的操作
        uploadTableData.value = xl
    }
}
</script>

<style lang="less" scoped>
.page-uploadAndExport {
}
</style>
